<template>
    <div>
        <Dropdown>
            <Button type="link" class="add-sampler-btn" my-5><span text-green> + 新增前置脚本取样器</span></Button>
            <template #overlay>
                <Menu>
                    <Menu.Item>
                        <a href="javascript:;" @click="handleAddPre('BeanShell')">Bean Shell</a>
                    </Menu.Item>
                    <Menu.Item>
                        <a href="javascript:;" @click="handleAddPre('JSR223')">JSR223</a>
                    </Menu.Item>
                </Menu>
            </template>
        </Dropdown>
    </div>
    <StressTestCollapse v-model:dataSource="mergeSamplerPreList">
        <template v-slot="slotProps">
            <div b="~ solid #707070 op-75" mx-8 rounded p="x-6 t-6">
                <StressTestBeanShellForm :isInner="true" v-if="slotProps.dataFromChild.type === 'BeanShell'" v-model:form-data="slotProps.dataFromChild" />
                <StressTestJSR223Form v-else v-model:form-data="slotProps.dataFromChild" />

            </div>
        </template>
    </StressTestCollapse>

    <div>
        <Dropdown>
            <Button type="link" class="add-sampler-btn" my-5><span text-green>+ 新增后置脚本取样器</span></Button>
            <template #overlay>
                <Menu>
                    <Menu.Item>
                        <a href="javascript:;" @click="handleAddPost('BeanShell')">Bean Shell</a>
                    </Menu.Item>
                    <Menu.Item>
                        <a href="javascript:;" @click="handleAddPost('JSR223')">JSR223</a>
                    </Menu.Item>
                </Menu>
            </template>
        </Dropdown>
    </div>
    <StressTestCollapse v-model:dataSource="mergeSamplerPostList">
        <template v-slot="slotProps">
            <div b="~ solid #707070 op-75" mx-8 rounded p="x-6 t-6">
                <StressTestBeanShellForm :isInner="true" v-if="slotProps.dataFromChild.type === 'BeanShell'" v-model:form-data="slotProps.dataFromChild" />
                <StressTestJSR223Form v-else v-model:form-data="slotProps.dataFromChild" />
            </div>
        </template>

    </StressTestCollapse>
</template>

<script setup lang="ts">
import {
    type IStressCaseDetailSaveReq,
} from '~/types/apis/stress-case'
import {
    Button,
    Dropdown,
    Menu,
} from 'ant-design-vue'
import {
    defaultWithIStressCaseBeanShellInner,
    defaultWithIStressCaseJSR223
} from '~/types/apis/stress-case'

const saveReq = defineModel<IStressCaseDetailSaveReq>('saveReq', { required: true })
const copySaveReq = {...saveReq.value}
const mergeSamplerPreList = ref([])
const mergeSamplerPostList = ref([])

watch(() => copySaveReq, () => {
    saveReq.value.beanShellPre.forEach((element: any) => {
        element.type = 'BeanShell'
    });
    saveReq.value.beanShellPost.forEach((element: any) => {
        element.type = 'BeanShell'
    });
    saveReq.value.jsr223Pre.forEach((element: any) => {
        element.type = 'JSR223'
    });
    saveReq.value.jsr223Post.forEach((element: any) => {
        element.type = 'JSR223'
    });
    const preList = [...saveReq.value.beanShellPre, ...saveReq.value.jsr223Pre]
    mergeSamplerPreList.value = preList.sort((ar1, ar2) => ar1.sort - ar2.sort) as any
    const postList = [...saveReq.value.beanShellPost, ...saveReq.value.jsr223Post]
    mergeSamplerPostList.value = postList.sort((ar1, ar2) => ar1.sort - ar2.sort) as any
}, {
    deep: true,
    immediate: true,
})

watch(() => mergeSamplerPreList, () => {
    saveReq.value.beanShellPre = mergeSamplerPreList.value.map((item: any) => {
        if (item.type === 'BeanShell') {
            const { ['type']: deleted, ...rest } = item;
            return rest
        }
    }).filter((item: any) => typeof item !== 'undefined')

    saveReq.value.jsr223Pre = mergeSamplerPreList.value.map((item: any) => {
        if (item.type === 'JSR223') {
            const { ['type']: deleted, ...rest } = item;
            return rest
        }
    }).filter((item: any) => typeof item !== 'undefined')
}, {
    deep: true,
})
 
watch(() => mergeSamplerPostList, () => {
    saveReq.value.beanShellPost = mergeSamplerPostList.value.map((item: any) => {
        if (item.type === 'BeanShell') {
            const { ['type']: deleted, ...rest } = item;
            return rest
        }
    }).filter((item: any) => typeof item !== 'undefined')

    saveReq.value.jsr223Post = mergeSamplerPostList.value.map((item: any) => {
        if (item.type === 'JSR223') {
            const { ['type']: deleted, ...rest } = item;
            return rest
        }
    }).filter((item: any) => typeof item !== 'undefined')

}, {
    deep: true,
})

const handleAddPre = (type: string) => {
    const defaultValue = type === 'BeanShell' ? defaultWithIStressCaseBeanShellInner : defaultWithIStressCaseJSR223
    mergeSamplerPreList.value.push({ ...defaultValue, type, sort: mergeSamplerPreList.value.length + 1 })
}

const handleAddPost = (type: string) => {
    const defaultValue = type === 'BeanShell' ? defaultWithIStressCaseBeanShellInner : defaultWithIStressCaseJSR223
    mergeSamplerPostList.value.push({...defaultValue, type, sort: mergeSamplerPostList.value.length + 1 })
}

</script>

<style ></style>